<template>
  <a-form @submit="handleSubmit" :form="form" class="form">
    <a-row class="form-row" :gutter="16">
      <a-col  :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">

        <a-form-item style="display:none">
          <a-input v-decorator="['id']"/>
        </a-form-item>


        <a-form-item :label="i18n('form.name','姓名')">
          <a-input
            :placeholder="i18n('form.name','姓名','input')"
            v-decorator="[
              'fullname',
              {rules: [{ required: true, message: i18n('form.name','姓名','input'), whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
        <a-form-item
          :label="i18n('form.account','账号')">
          <a-input
            :placeholder="i18n('form.account','账号','input')"
            v-decorator="[
              'username',
              {rules: [{ required: true, message: i18n('form.account','账号','input'), whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>

      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
        <a-form-item :label="i18n('form.password','密码')">
          <a-input
            type="password"
            :placeholder="i18n('form.password','密码','input')"
            v-decorator="[
              'password',
              {rules: [{ required: true, message: i18n('form.password','密码','input'), whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
        <a-form-item
          :label="i18n('form.confirmPassword','确认密码')">
          <a-input
            type="password"
            :placeholder="i18n('form.confirmPlease','请确认密码')"
            v-decorator="[
              'newPassword',
              {rules: [{ required: true, message:i18n('form.confirmPlease','请确认密码'), whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
        <a-form-item
          :label="i18n('form.status','状态')">
          <a-input
            :placeholder="i18n('form.status','状态','select')"
            v-decorator="[
              'status',
              {rules: [{ required: true, message: i18n('form.status','状态','select'), whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>

      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
        <a-form-item
          :label="i18n('form.sex','性别')">
          <a-input
            :placeholder="i18n('form.sex','性别','select')"
            v-decorator="[
              'sex',
              {rules: [{ required: true, message: i18n('form.sex','性别','select'), whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>

      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
        <a-form-item
          :label="i18n('form.entryTime','入职时间')">
          <a-date-picker
            style="width: 100%"
            v-decorator="[
              'entryTime',
              {rules: [{ required: true, message: i18n('form.entryTime','入职时间','select')}]}
            ]" />
        </a-form-item>
      </a-col>
      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
        <a-form-item
          :label="i18n('form.resignTime','离职时间')">
          <a-date-picker
            style="width: 100%"
            v-decorator="[
              'quitTime',
              {rules: [{ required: true, message: i18n('form.resignTime','离职时间','select')}]}
            ]" />
        </a-form-item>
      </a-col>

      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
        <a-form-item
          :label="i18n('form.cellphone','手机')">
          <a-input
            :placeholder="i18n('form.cellphone','手机','input')"
            v-decorator="[
              'mobile',
              {rules: [{ required: true, message: i18n('form.cellphone','手机','input'), whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>

      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
        <a-form-item
          :label="i18n('form.mail','邮件')">
          <a-input
            :placeholder="i18n('form.mail','邮件','input')"
            v-decorator="[
              'email',
              {rules: [{ required: true, message: i18n('form.mail','邮件','input'), whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>

      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
        <a-form-item
          :label="i18n('form.address','地址')">
          <a-input
            :placeholder="i18n('form.address','地址','input')"
            v-decorator="[
              'address',
              {rules: [{ required: true, message: i18n('form.address','地址','input'), whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>

      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
        <a-form-item
          :label="i18n('form.urgentContact','紧急联系人')">
          <a-input
            :placeholder="i18n('form.urgentContact','紧急联系人','input')"
            v-decorator="[
              'urgent',
              {rules: [{ required: true, message: i18n('form.urgentContact','紧急联系人','input'), whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>

      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
        <a-form-item
          :label="i18n('form.urgentPhone','紧急联系人手机')">
          <a-input
            :placeholder="i18n('form.urgentPhone','紧急联系人手机','input')"
            v-decorator="[
              'urgentMobile',
              {rules: [{ required: true, message: i18n('form.urgentPhone','紧急联系人手机','input'), whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>

      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
        <a-form-item
          :label="i18n('form.qqNumber','QQ号')">
          <a-input
            :placeholder="i18n('form.qqNumber','QQ号','input')"
            v-decorator="[
              'qq',
              {rules: [{ required: true, message: i18n('form.qqNumber','QQ号','input'), whitespace: true}]}
            ]" />
        </a-form-item>
      </a-col>

      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
        <a-form-item
          :label="i18n('form.birthday','出生日期')">
          <a-date-picker
            style="width: 100%"
            v-decorator="[
              'birthday',
              {rules: [{ required: true, message: i18n('form.birthday','出生日期','select')}]}
            ]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item v-if="showSubmit">
      <a-button htmlType="submit" >Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
  export default {
    name: 'OsUserBasicForm',
    props: {
      showSubmit: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        form: this.$form.createForm(this)
      }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"OsUserBasicForm",key);
        },
      handleSubmit (e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            this.$notification['error']({
              message: 'Received values of form:',
              description: values
            })
          }
        })
      },
      validate (rule, value, callback) {
        const regex = /^user-(.*)$/
        if (!regex.test(value)) {
          callback(new Error(this.i18n('list.user','需要以 user- 开头')))
        }
        callback()
      }
    }
  }
</script>

<style scoped>

</style>
